<template>
	<view class="n-file-content">
		<view v-if="files.length === 0" class="no-data">
			<text>无附件</text>
		</view>
		<view v-else class="file-list" v-for="item in files" :key="item.id" @click="show(item)">
			<image class="file-img" :src="getIcon(item)"></image>
			<view class="file-content">
				<view class="file-name" @click.stop="rename(item)">{{item.name}}</view>
					<!-- <view @click.stop="rename(item)">{{item.name}}</view>
				</view> -->
				<!-- <view class="file-size" v-if="item.size">{{getFileSize(item)}}</view> -->
			</view>
			<view class="file-delete" v-if="hasdeleted">
				<view class="delete-text" @click.stop="deleteFile(item)">删除</view>
				<!-- <button type="primary" @click.stop="deleteFile(item)" v-if="hasdeleted">删除</button> -->
			</view>
		</view>
		
		<uni-popup ref="popup" type="dialog">
		    <uni-popup-dialog mode="input" title="重命名" :value="currentFile.name" @confirm="confirm"></uni-popup-dialog>
		</uni-popup>
	</view>
	
</template>

<script>
	import { file } from '@/utils/common.js'
	import * as sqliteUtil from '@/utils/sqlite.js'
	
	export default {
		props: {
			files: {
				type: Array,
				default() {
					return []
				}
			},
			hasdeleted: {
				type: Boolean,
				default: false
			},
			emitkey: {
				type: String,
				default: ''
			},
			source: {
				type: Object,
				default: null
			}
		},
		data() {
			return {
				currentFile: {}
			}
		},
		methods: {
			getIcon(item) {
				if(file.checkIsImg(item)){
					return '/static/images/icon/image-ico.png'
				}else if(file.checkIsAudio(item)){
					return '/static/images/icon/audio.png'
				}else if(file.checkIsVideo(item)){
					return '/static/images/icon/video.png'
				}else if(item.ext === 'txt'){
					return '/static/images/icon/txt-ico.png'
				}else if(item.ext === 'pdf'){
					return '/static/images/icon/pdf-ico.png'
				}else if(item.ext === 'docx' || item.ext === 'doc'){
					return '/static/images/icon/word-ico.png'
				}else if(item.ext === 'xls' || item.ext === 'xlsx'){
					return '/static/images/icon/excel-ico.png'
				}else{
					return '/static/images/icon/attachment.png'
				}
			},
			getFileSize(item) {
				let size = file.getFileSize(item.size)
				if(size > 1000) {
					size = (size / 1024).toFixed(2) + "MB"
				} else {
					size = size + "KB"
				}
				return size
			},
			deleteFile(item) {
				const _this = this
				uni.showModal({
				    title: _this.$t('baseCommon.message.tips'),
				    content: '确定要删除该文件吗？',
				    success: function (res) {
				        if (res.confirm) {
							_this.showFile = false
							let files = _this.files
							for(let i=0;i<files.length;i++) {
								if(files[i].id === item.id) {
									files.splice(i, 1)
								}
							}
							_this.showFile = true
							if(_this.source) {
								let data = {
									source: _this.source,
									file: item
								}
								uni.$emit(_this.emitkey, data)
							} else {
								uni.$emit(_this.emitkey, item)
							}
							
							sqliteUtil.deleteTableInfo('m_cpis_file_attachment', 'id', item.id)
						}
					}
				})
			},
			show(item) {
				if(file.checkIsImg(item)){
					uni.previewImage({
						urls: [item.filePath]
					});
				}else if(file.checkIsVideo(item)){
					uni.navigateTo({
						url: "/pages/base/video?fileId="+item.id
					})
				}else if(file.checkIsAudio(item)){
					uni.navigateTo({
						url: "/pages/base/audio?fileId="+item.id+"&fileName="+item.name+"&fileSize="+this.getFileSize(item)
					})
				}else{
					let fileName = item.name + "." + item.ext
					file.downloadFile(item.id, fileName)
				}
			},
			rename(item) {
				if(this.hasdeleted) {
					this.currentFile = item
					this.$refs.popup.open()
				}
			},
			confirm(done, val) {
				this.$refs.popup.close()
				this.fileModifyName(val)
			},
			fileModifyName(fileName) {
				let fileInfo = {
					file: this.currentFile,
					newFileName: fileName
				}
				this.$emit("modifyName", fileInfo)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.n-file-content {
		width: 100%;
		padding: 8px 4px;
		background-color: #fff;
	}
	
	.file-list {
		margin-top: 5px;
		display: flex;
		align-items: center;
		width: 100%;
		
		.file-img { 
			height: 35px;
			width: 40px;
		}
		
		.file-content {
			width: calc(100% - 125px);	
			margin: 0 8px;
			font-size: 14px;
			
			.file-name {
				white-space: nowrap;/*设置不换行*/
				overflow: hidden; /*设置隐藏*/
				text-overflow: ellipsis; /*设置隐藏部分为省略号*/
			}
			
			.file-size {
				color: $uni-text-color-grey;
			}
		}
		
		.file-delete {
			height: 30px;
			width: 60px;
			background-color: #1e90e6;
			border-radius: 5px;
			
			.delete-text {
				color: #fff;
				text-align: center;
				line-height: 20px;
				margin: 5px 0; 
			}
		}
	}
	
	.no-data {
		margin: 20rpx;
		
		text {
			color: #999;
		}
	}
</style>
